﻿@model List<CoffeeShop.Models.Entities.Area>

@{
    ViewBag.Title = "Quản lý khu vực";
    Layout = "~/Views/Shared/_AdminLayout.cshtml";
}

<div class="breadcrumbs" id="breadcrumbs">
    <ul class="breadcrumb">
        <li>
            <i class="icon-home home-icon"></i>
            <a href="/Home/Index">Trang chủ</a>

            <span class="divider">
                <i class="icon-angle-right arrow-icon"></i>
            </span>
        </li>
        <li class="active">Quản lý khu vực</li>
    </ul>
    <!--.breadcrumb-->
</div>

<div class="page-content">
    <div>
        <h1 class="row-fluid header smaller lighter purple">
            <span class="span9">Quản lý khu vực</span>
            <span class="span3">
                 <a data-toggle="modal" href="#tblAddArea" class="pull-right inline">
                    <button class="btn btn-primary" id="btnAdd" onclick="loadOfficeToCombobox()">
                        <i class="icon-plus"></i>
                        Thêm mới
                    </button>
                </a>
            </span>
        </h1>
    </div>

    <div class="row-fluid" id="areasTable">
        @Html.Partial("_AreasTable", Model)
    </div>

    <!-- Form Add new Area-->
    <div class="row-fluid">
        <div id="tblAddArea" class="modal hide" tabindex="-1">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">×</button>
                <h4 class="blue bigger">Thông tin khu vực</h4>
            </div>

            <div class="modal-body overflow-visible">
                <form id="formAddArea">
                    <div class="row-fluid">
                        <div class="span5">
                            <div class="ace-file-input ace-file-multiple">
                                <input type="file" id="imageAddFile">
                            </div>
                        </div>

                        <div class="vspace"></div>

                        <div class="span7">
                            <div class="control-group" id="groupAddOffice">
                                <label for="form-field-select-3">Chi nhánh</label>
                                <div class="controls">
                                    <select name="cboOffice" id="cboOffice">
                                        <option value=""></option>
                                    </select>
                                </div>
                            </div>

                            <div class="control-group" id="groupAddAreaName">
                                <label class="control-label" for="form-field-username">Tên khu vực</label>
                                <div class="controls">
                                    <input type="text" id="txtAddAreaName" name="txtAddAreaName" placeholder="Tên khu vực">
                                    <div id="existedAreaName" style="display: none" class="help-block">
                                        Tên khu vực đã được sử dụng!
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>

            <div class="modal-footer">
                <button class="btn btn-small" data-dismiss="modal">
                    <i class="icon-remove"></i>
                    Hủy
                </button>

                <button class="btn btn-small btn-primary" onclick="addArea()">
                    <i class="icon-ok"></i>
                    Lưu
                </button>
            </div>
        </div>
    </div>
    <!-- Form Add new Area-->
    
     <!-- Form Update new Area-->
    <div class="row-fluid">
        <div id="tblUpdateArea" class="modal hide" tabindex="-1">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">×</button>
                <h4 class="blue bigger">Thông tin khu vực</h4>
            </div>

            <div class="modal-body overflow-visible">
                <form id="formUpdateArea">
                    <div class="row-fluid">
                        <div class="span5">
                            <div class="ace-file-input ace-file-multiple">
                                <input type="file" id="imageUpdateFile">
                            </div>
                        </div>

                        <div class="vspace"></div>

                       <input type="text" id="txtUpdateAreaID" name="txtUpdateAreaID" style="display:none">

                        <div class="span7">
                            <div class="control-group">
                                <label for="form-field-select-3">Chi nhánh</label>
                                <div class="controls">
                                    <select name="cboUpdateOffice" id="cboUpdateOffice">
                                        <option value=""></option>
                                    </select>
                                </div>
                            </div>

                            <div class="control-group" id="groupUpdateAreaName">
                                <label class="control-label" for="form-field-username">Tên khu vực</label>
                                <div class="controls">
                                    <input type="text" id="txtUpdateAreaName" name="txtUpdateAreaName" placeholder="Tên khu vực">
                                    <div id="existedUpdateAreaName" style="display: none" class="help-block">
                                        Tên khu vực đã được sử dụng!
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>

            <div class="modal-footer">
                <button class="btn btn-small" data-dismiss="modal">
                    <i class="icon-remove"></i>
                    Hủy
                </button>

                <button class="btn btn-small btn-primary" onclick="updateArea()">
                    <i class="icon-ok"></i>
                    Lưu
                </button>
            </div>
        </div>
    </div>
    <!-- Form Update new Area-->

</div>

<script>
    $(function () {
        $('#imageAddFile').ace_file_input({
            style: 'well',
            btn_choose: 'Kéo thả ảnh hoặc click chuột vào đây!',
            btn_change: null,
            no_icon: 'icon-cloud-upload',
            droppable: true,
            thumbnail: 'large'
					,
            preview_error: function (filename, error_code) {
            }
        }).on('change', function () {
        });

        $('#imageUpdateFile').ace_file_input({
            style: 'well',
            btn_choose: 'Kéo thả ảnh hoặc click chuột vào đây!',
            btn_change: null,
            no_icon: 'icon-cloud-upload',
            droppable: true,
            thumbnail: 'large'
                   ,
            preview_error: function (filename, error_code) {
            }
        }).on('change', function () {
        });
        
        validateAddArea("#formAddArea");
        validateUpdateArea("#formUpdateArea");
    })

    // Load all office into "Chi nhánh" combobox
    function loadOfficeToCombobox() {
        $.post("/Area/GetListOffice", {}, function (out) {
            var item = "";
            item += '<option value=""></option>';
            $.each(out, function (index, office) {
                item += '<option value="' + office.ID + '">' + office.Name + '</option>';
            });
            $('#cboOffice').html(item);
            $("#cboOffice").trigger("chosen:updated");
        });
    }

    // Validate Update Form
    function validateAddArea(validateForm) {
        $(validateForm).validate({
            errorElement: 'div',
            errorClass: 'help-block',
            focusInvalid: false,
            rules: {
                txtAddAreaName: {
                    required: true,
                    maxlength: 50
                },
                cboOffice: {
                    required: true,
                }
            },
            messages: {
                txtAddAreaName: {
                    required: "Xin hãy nhập tên khu vực!",
                    maxlength: "Tên khu vực tối đa 50 ký tự!"
                },
                cboOffice: {
                    required: "Xin hãy chọn chi nhánh!",
                }
            },
            highlight: function (e) {
                $(e).closest('.control-group').removeClass('info').addClass('error');
            },
            success: function (e) {
                $(e).closest('.control-group').removeClass('error').addClass('info');
                $(e).remove();
            }
        });
    }

    // Show message error when insert a new Area
    function showAddMessageError() {
        $.gritter.add({
            title: 'Tạo mới khu vực thất bại!',
            text: 'Xin hãy kiểm tra lại thông tin đã nhập hoặc kết nối với cơ sở dữ liệu',
            time: '1000',
            class_name: 'gritter-error'
        });
        return false;
    }

    // Show message success when insert a new Area
    function showMessageSuccess() {
        $.gritter.add({
            title: 'Tạo mới khu vực thành công!',
            text: 'Thông tin khu vực vừa nhập đã được tạo!',
            time: '1000',
            class_name: 'gritter-info'
        });
        return false;
    }

    // Cleanning add form when user finish insert a new Area
    function clearFormAddArea() {
        $('#txtAddAreaName').val('');
    }

    // Add a new office method
    function addArea() {
        if ($('#formAddArea').valid()) {
            editFr = $('#formAddArea').val();

            var officeId = $('#cboOffice option:selected', editFr).val();
            var areaName = $('#txtAddAreaName', editFr).val();

            $.post("/Area/CreateArea", {
                nameOfArea: areaName, idOfOffice: officeId
            }, function (result) {
                if (result == "ExistedArea") {
                    // Show error duplicate message
                    $('#existedAreaName').attr("style", "display: block");
                    $('#groupAddAreaName').removeClass('info').addClass('error');
                }
                if (result == "AddSuccessful") {
                    $('.close').click();
                    reloadTable();
                    clearFormAddArea();
                    showMessageSuccess();
                }
                if (result == "FailAddNewArea") {
                    $('.close').click();
                    clearFormAddArea();
                    showAddMessageError();
                }
            }).error(function () {
                $('.close').click();
                showMessageError();
            });
        }
    }

    // Get an area by areaId
    function getAreaById(areaId) {
        $.ajax({
            url: '@Url.Action("GetAreaById", "Area")',
            type: 'GET',
            cache: false,
            data: { areaId: areaId },
            success: function (data) {
                $("#txtUpdateAreaID").val(data.AreaId)
                if (data.IsDeleted == true) {
                    $("#txtUpdateAreaName").val(data.AreaName).prop('readonly', true);
                    loadComboboxUpdate(data.OfficeId);
                }
                else {
                    $("#txtUpdateAreaName").val(data.AreaName).prop('readonly', false);
                    loadComboboxUpdate(data.OfficeId);
                }
            },
            error: function (data) {
                alert('Không thể lấy dữ liệu. Xin hãy thử lại!');
            }
        });
    }

    // Load combobox Office when update an Area
    function loadComboboxUpdate(officeId) {
        $.post("/Area/GetListOffice", {}, function (out) {
            var item = "";
            item += '<option value=""></option>';
            $.each(out, function (index, office) {
                if (office.ID == officeId) {
                    item += '<option value="' + office.ID + '" selected>' + office.Name + '</option>';
                }
                else {
                    item += '<option value="' + office.ID + '">' + office.Name + '</option>';
                }
                
            });
            $('#cboUpdateOffice').html(item);
            $("#cboUpdateOffice").trigger("chosen:updated");
        });
    }

    // Validate Update Form
    function validateUpdateArea(validateForm) {
        $(validateForm).validate({
            errorElement: 'div',
            errorClass: 'help-block',
            focusInvalid: false,
            rules: {
                txtUpdateAreaName: {
                    required: true,
                    maxlength: 50
                },
                cboUpdateOffice: {
                    required: true,
                }
            },
            messages: {
                txtUpdateAreaName: {
                    required: "Xin hãy nhập tên khu vực!",
                    maxlength: "Tên khu vực tối đa 50 ký tự!"
                },
                cboUpdateOffice: {
                    required: "Xin hãy chọn chi nhánh!",
                }
            },
            highlight: function (e) {
                $(e).closest('.control-group').removeClass('info').addClass('error');
            },
            success: function (e) {
                $(e).closest('.control-group').removeClass('error').addClass('info');
                $(e).remove();
            }
        });
    }

    // Show message error when insert a new Area
    function showUpdateMessageError() {
        $.gritter.add({
            title: 'Cập nhật khu vực thất bại!',
            text: 'Xin hãy kiểm tra lại thông tin đã nhập hoặc kết nối với cơ sở dữ liệu',
            time: '1000',
            class_name: 'gritter-error'
        });
        return false;
    }

    // Show message success when insert a new Area
    function showUpdateMessageSuccess() {
        $.gritter.add({
            title: 'Cập nhật khu vực thành công!',
            text: 'Thông tin khu vực đã được cập nhật!',
            time: '1000',
            class_name: 'gritter-info'
        });
        return false;
    }

    // Update method
    function updateArea() {
        if ($('#formUpdateArea').valid()) {
            editFr = $('#tblUpdateArea').val();
            var areaId = $('#txtUpdateAreaID', editFr).val();
            var officeId = $('#cboUpdateOffice option:selected', editFr).val();
            var areaName = $('#txtUpdateAreaName', editFr).val();

            $.post("/Area/UpdateArea", {
                areaId: areaId, officeId: officeId, areaName: areaName
            }, function (result) {
                if (result == "ExistedArea") {
                    // Show error duplicate message
                    $('#existedUpdateAreaName').attr("style", "display: block");
                    $('#groupUpdateAreaName').removeClass('info').addClass('error');
                }
                if (result == "UpdateSuccessful") {
                    $('.close').click();
                    reloadTable();
                    clearFormUpdateArea();
                    showUpdateMessageSuccess();
                }
                if (result == "FailUpdateArea") {
                    $('.close').click();
                    clearFormUpdateArea();
                    showUpdateMessageError();
                }
            }).error(function () {
                $('.close').click();
                showMessageUpdateError();
            });
        }
    }

    // Cleanning update form when user finish insert a new office
    function clearFormUpdateArea() {
        $('#txtUpdateAreaID').val('');
        $('#txtAddAreaName').val('');
        document.getElementById('cboUpdateOffice').options.length = 0;
    }

    // Reload table when users finish update or insert a new area
    function reloadTable() {
        $.ajax({
            url: "/Area/LoadAllAreas",
            type: "POST",
            success: function (data) {
                $('#areasTable').html(data);
            }
        });
    }
</script>
